<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EFAK-AI - 密码工具</title>
    <link rel="shortcut icon" th:href="@{/images/efak_ai_logo.png}" />
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" />
    <link th:href="@{/plugins/tailwindcss/tailwind.min.css}" rel="stylesheet">
    <link th:href="@{/css/inter-font.css}" rel="stylesheet">
    <style>
        :root {
            --primary-color: #165DFF;
            --primary-dark: #0E4AE6;
            --secondary-color: #4F46E5;
            --success-color: #16a34a;
            --warning-color: #f59e0b;
            --danger-color: #dc2626;
            /* 优化背景：使用更简单的渐变 */
            --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            --input-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        }

        * {
            box-sizing: border-box;
        }

        /* 性能优化：减少重绘和重排 */
        html {
            /* 启用硬件加速 */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        /* 优化滚动容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
            /* 优化滚动性能 */
            -webkit-overflow-scrolling: touch;
            will-change: scroll-position;
        }

        /* 优化渐变背景性能 */
        body {
            font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
            background: var(--gradient-bg);
            background-attachment: fixed;
            /* 固定背景，减少重绘 */
            min-height: 100vh;
            margin: 0;
            padding: 0;
            /* 优化滚动性能 */
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        .header {
            text-align: center;
            margin-bottom: 3rem;
            color: white;
        }

        .header h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .header p {
            font-size: 1.125rem;
            opacity: 0.9;
            font-weight: 500;
        }

        .tool-card {
            background: rgba(255, 255, 255, 0.98);
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            margin-bottom: 2rem;
            overflow: hidden;
            /* 优化性能：使用will-change和transform3d */
            will-change: transform;
            transform: translateZ(0);
            transition: transform 0.2s ease;
        }

        .tool-card:hover {
            transform: translateY(-2px) translateZ(0);
        }

        .card-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1.5rem 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .card-header h2 {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .card-body {
            padding: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.5rem;
        }

        .form-input {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.2s ease;
            background: #fff;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: var(--input-shadow);
        }

        .form-input::placeholder {
            color: #9ca3af;
        }

        .btn {
            padding: 0.875rem 1.5rem;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            text-decoration: none;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
            /* 优化性能 */
            will-change: transform;
            transform: translateZ(0);
        }

        .btn-primary:hover {
            transform: translateY(-1px) translateZ(0);
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.4);
        }

        .btn-success {
            background: linear-gradient(135deg, var(--success-color), #15803d);
            color: white;
            box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
            will-change: transform;
            transform: translateZ(0);
        }

        .btn-success:hover {
            transform: translateY(-1px) translateZ(0);
            box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
        }

        .btn-warning {
            background: linear-gradient(135deg, var(--warning-color), #d97706);
            color: white;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
            will-change: transform;
            transform: translateZ(0);
        }

        .btn-warning:hover {
            transform: translateY(-1px) translateZ(0);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
        }

        .btn-purple {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: white;
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
            will-change: transform;
            transform: translateZ(0);
        }

        .btn-purple:hover {
            transform: translateY(-1px) translateZ(0);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
        }

        .result-container {
            margin-top: 1.5rem;
            display: none;
        }

        .result-container.show {
            display: block;
            animation: slideDown 0.2s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-5px) translateZ(0);
            }

            to {
                opacity: 1;
                transform: translateY(0) translateZ(0);
            }
        }

        .result-box {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 1.25rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            word-break: break-all;
            position: relative;
            line-height: 1.6;
        }

        .result-box.success {
            background: #f0fdf4;
            border-color: #bbf7d0;
            color: #166534;
        }

        .result-box.error {
            background: #fef2f2;
            border-color: #fecaca;
            color: #dc2626;
        }

        .copy-btn {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #6b7280;
        }

        .copy-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: scale(1.02) translateZ(0);
        }

        .copy-btn.copied {
            background: var(--success-color);
            color: white;
        }

        .grid {
            display: grid;
            gap: 1.5rem;
        }

        .grid-cols-1 {
            grid-template-columns: 1fr;
        }

        .grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .flex {
            display: flex;
        }

        .items-center {
            align-items: center;
        }

        .items-end {
            align-items: end;
        }

        .justify-center {
            justify-content: center;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .gap-4 {
            gap: 1rem;
        }

        .w-full {
            width: 100%;
        }

        .hidden {
            display: none;
        }

        .mb-4 {
            margin-bottom: 1rem;
        }

        .mb-6 {
            margin-bottom: 1.5rem;
        }

        .mt-4 {
            margin-top: 1rem;
        }

        .text-center {
            text-align: center;
        }

        .text-sm {
            font-size: 0.875rem;
        }

        .text-lg {
            font-size: 1.125rem;
        }

        .font-medium {
            font-weight: 500;
        }

        .font-semibold {
            font-weight: 600;
        }

        .text-gray-700 {
            color: #374151;
        }

        .text-gray-600 {
            color: #4b5563;
        }

        .text-white {
            color: white;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }

            .header h1 {
                font-size: 2rem;
            }

            .card-body {
                padding: 1.5rem;
            }

            .grid-cols-2,
            .grid-cols-3 {
                grid-template-columns: 1fr;
            }

            .btn {
                padding: 0.75rem 1rem;
                font-size: 0.875rem;
            }

            /* 移动端性能优化：减少动画和阴影 */
            .tool-card {
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
                transition: none;
            }

            .tool-card:hover {
                transform: none;
            }

            .btn:hover {
                transform: none;
            }

            /* 移动端禁用复杂背景 */
            body {
                background: #667eea;
                background-attachment: scroll;
            }
        }

        /* 低性能设备优化 */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s linear infinite;
            /* 优化动画性能 */
            will-change: transform;
            transform: translateZ(0);
        }

        @keyframes spin {
            to {
                transform: rotate(360deg) translateZ(0);
            }
        }

        /* 成功/错误提示 */
        .alert {
            padding: 0.875rem 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            display: none;
        }

        .alert-success {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #166534;
        }

        .alert-error {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #dc2626;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 标题 -->
        <div class="header">
            <h1>🔐 EFAK-AI 密码工具</h1>
            <p>BCrypt密码加密和验证工具 - 安全、快速、便捷</p>
        </div>

        <!-- 密码加密 -->
        <div class="tool-card">
            <div class="card-header">
                <h2>
                    <i class="fa fa-lock"></i>
                    密码加密
                </h2>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">明文密码</label>
                        <input type="text" id="plainPassword" placeholder="请输入明文密码" class="form-input">
                    </div>
                    <div class="form-group flex items-end">
                        <button onclick="encodePassword()" class="btn btn-primary w-full">
                            <i class="fa fa-arrow-right"></i>
                            生成加密密码
                        </button>
                    </div>
                </div>
                <div id="encodeResult" class="result-container">
                    <label class="form-label">加密结果</label>
                    <div class="result-box success" id="encodedPassword">
                        <button class="copy-btn" onclick="copyToClipboard('encodedPassword')" title="复制到剪贴板">
                            <i class="fa fa-copy"></i>
                        </button>
                        <span id="encodedPasswordText"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 密码验证 -->
        <div class="tool-card">
            <div class="card-header">
                <h2>
                    <i class="fa fa-check-circle"></i>
                    密码验证
                </h2>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">明文密码</label>
                        <input type="text" id="verifyPlainPassword" placeholder="请输入明文密码" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">加密密码</label>
                        <input type="text" id="verifyEncodedPassword" placeholder="请输入加密密码" class="form-input">
                    </div>
                </div>
                <div class="form-group">
                    <button onclick="verifyPassword()" class="btn btn-success w-full">
                        <i class="fa fa-search"></i>
                        验证密码
                    </button>
                </div>
                <div id="verifyResult" class="result-container">
                    <label class="form-label">验证结果</label>
                    <div class="result-box" id="verifyResultText">
                        <button class="copy-btn" onclick="copyToClipboard('verifyResultText')" title="复制到剪贴板">
                            <i class="fa fa-copy"></i>
                        </button>
                        <span id="verifyResultContent"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 生成多个密码 -->
        <div class="tool-card">
            <div class="card-header">
                <h2>
                    <i class="fa fa-copy"></i>
                    生成多个密码
                </h2>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-3 gap-4">
                    <div class="form-group">
                        <label class="form-label">明文密码</label>
                        <input type="text" id="multiplePlainPassword" placeholder="请输入明文密码" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">生成数量</label>
                        <input type="number" id="passwordCount" value="5" min="1" max="20" class="form-input">
                    </div>
                    <div class="form-group flex items-end">
                        <button onclick="generateMultiplePasswords()" class="btn btn-purple w-full">
                            <i class="fa fa-magic"></i>
                            生成多个
                        </button>
                    </div>
                </div>
                <div id="multipleResult" class="result-container">
                    <label class="form-label">生成结果</label>
                    <div class="result-box" id="multiplePasswords">
                        <button class="copy-btn" onclick="copyToClipboard('multiplePasswords')" title="复制到剪贴板">
                            <i class="fa fa-copy"></i>
                        </button>
                        <span id="multiplePasswordsText"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 默认admin密码 -->
        <div class="tool-card">
            <div class="card-header">
                <h2>
                    <i class="fa fa-user"></i>
                    默认Admin密码
                </h2>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <button onclick="getDefaultAdminPassword()" class="btn btn-warning w-full">
                        <i class="fa fa-download"></i>
                        获取默认Admin密码
                    </button>
                </div>
                <div id="defaultResult" class="result-container">
                    <label class="form-label">默认密码信息</label>
                    <div class="result-box" id="defaultPasswordInfo">
                        <button class="copy-btn" onclick="copyToClipboard('defaultPasswordInfo')" title="复制到剪贴板">
                            <i class="fa fa-copy"></i>
                        </button>
                        <span id="defaultPasswordInfoText"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/plugins/jquery/jquery-3.6.0.min.js}"></script>
    <script>
        // 复制到剪贴板功能
        function copyToClipboard(elementId) {
            const element = document.getElementById(elementId);
            const text = element.querySelector('span').textContent;

            if (navigator.clipboard && window.isSecureContext) {
                // 使用现代 Clipboard API
                navigator.clipboard.writeText(text).then(() => {
                    showCopySuccess(elementId);
                }).catch(() => {
                    fallbackCopyTextToClipboard(text, elementId);
                });
            } else {
                // 降级方案
                fallbackCopyTextToClipboard(text, elementId);
            }
        }

        function fallbackCopyTextToClipboard(text, elementId) {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();

            try {
                document.execCommand('copy');
                showCopySuccess(elementId);
            } catch (err) {
                console.error('复制失败:', err);
                showCopyError(elementId);
            }

            document.body.removeChild(textArea);
        }

        function showCopySuccess(elementId) {
            const copyBtn = document.querySelector(`#${elementId} .copy-btn`);
            const icon = copyBtn.querySelector('i');

            // 保存原始图标
            const originalIcon = icon.className;

            // 显示成功状态
            copyBtn.classList.add('copied');
            icon.className = 'fa fa-check';

            // 显示提示
            showToast('✅ 复制成功！', 'success');

            // 2秒后恢复原始状态
            setTimeout(() => {
                copyBtn.classList.remove('copied');
                icon.className = originalIcon;
            }, 2000);
        }

        function showCopyError(elementId) {
            showToast('❌ 复制失败，请手动复制', 'error');
        }

        // 显示提示消息
        function showToast(message, type = 'info') {
            // 移除现有的提示
            $('.toast').remove();

            const toast = $(`
                <div class="toast ${type}" style="
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: ${type === 'success' ? '#16a34a' : type === 'error' ? '#dc2626' : '#165DFF'};
                    color: white;
                    padding: 12px 20px;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    z-index: 1000;
                    font-size: 14px;
                    font-weight: 500;
                    animation: slideInRight 0.3s ease-out;
                ">
                    ${message}
                </div>
            `);

            $('body').append(toast);

            // 3秒后自动移除
            setTimeout(() => {
                toast.fadeOut(300, function () {
                    $(this).remove();
                });
            }, 3000);
        }

        // 显示结果容器
        function showResult(containerId) {
            $(`#${containerId}`).addClass('show');
        }

        // 隐藏结果容器
        function hideResult(containerId) {
            $(`#${containerId}`).removeClass('show');
        }

        // 设置加载状态
        function setLoading(buttonId, loading) {
            const button = $(`#${buttonId}`);
            const icon = button.find('i');
            const text = button.contents().filter(function () {
                return this.nodeType === 3;
            }).text().trim();

            if (loading) {
                button.prop('disabled', true);
                icon.removeClass().addClass('fa loading');
                button.contents().filter(function () {
                    return this.nodeType === 3;
                }).replaceWith(' 处理中...');
            } else {
                button.prop('disabled', false);
                icon.removeClass().addClass('fa fa-arrow-right');
                button.contents().filter(function () {
                    return this.nodeType === 3;
                }).replaceWith(` ${text}`);
            }
        }

        function encodePassword() {
            const password = $('#plainPassword').val().trim();
            if (!password) {
                showToast('请输入明文密码', 'error');
                $('#plainPassword').focus();
                return;
            }

            setLoading('encodeBtn', true);

            $.ajax({
                url: '/api/password/encode',
                type: 'POST',
                data: { password: password },
                success: function (response) {
                    setLoading('encodeBtn', false);
                    if (response.success) {
                        $('#encodedPasswordText').text(response.data.encodedPassword);
                        showResult('encodeResult');
                        showToast('密码加密成功！', 'success');
                    } else {
                        showToast('加密失败: ' + response.message, 'error');
                    }
                },
                error: function (xhr, status, error) {
                    setLoading('encodeBtn', false);
                    showToast('请求失败，请检查网络连接', 'error');
                }
            });
        }

        function verifyPassword() {
            const plainPassword = $('#verifyPlainPassword').val().trim();
            const encodedPassword = $('#verifyEncodedPassword').val().trim();

            if (!plainPassword || !encodedPassword) {
                showToast('请输入明文密码和加密密码', 'error');
                return;
            }

            setLoading('verifyBtn', true);

            $.ajax({
                url: '/api/password/verify',
                type: 'POST',
                data: {
                    originalPassword: plainPassword,
                    encodedPassword: encodedPassword
                },
                success: function (response) {
                    setLoading('verifyBtn', false);
                    if (response.success) {
                        const result = response.data.matches ? '✅ 密码匹配成功' : '❌ 密码匹配失败';
                        const resultClass = response.data.matches ? 'success' : 'error';

                        $('#verifyResultContent').text(result);
                        $('#verifyResultText').removeClass('success error').addClass(resultClass);
                        showResult('verifyResult');

                        const message = response.data.matches ? '密码验证成功！' : '密码验证失败！';
                        showToast(message, response.data.matches ? 'success' : 'error');
                    } else {
                        showToast('验证失败: ' + response.message, 'error');
                    }
                },
                error: function (xhr, status, error) {
                    setLoading('verifyBtn', false);
                    showToast('请求失败，请检查网络连接', 'error');
                }
            });
        }

        function generateMultiplePasswords() {
            const password = $('#multiplePlainPassword').val().trim();
            const count = parseInt($('#passwordCount').val()) || 5;

            if (!password) {
                showToast('请输入明文密码', 'error');
                $('#multiplePlainPassword').focus();
                return;
            }

            setLoading('multipleBtn', true);

            $.ajax({
                url: '/api/password/generate-multiple',
                type: 'POST',
                data: {
                    password: password,
                    count: count
                },
                success: function (response) {
                    setLoading('multipleBtn', false);
                    if (response.success) {
                        const passwords = response.data.encodedPasswords.join('\n');
                        $('#multiplePasswordsText').text(passwords);
                        showResult('multipleResult');
                        showToast(`成功生成 ${count} 个加密密码！`, 'success');
                    } else {
                        showToast('生成失败: ' + response.message, 'error');
                    }
                },
                error: function (xhr, status, error) {
                    setLoading('multipleBtn', false);
                    showToast('请求失败，请检查网络连接', 'error');
                }
            });
        }

        function getDefaultAdminPassword() {
            setLoading('defaultBtn', true);

            $.ajax({
                url: '/api/password/default-admin',
                type: 'GET',
                success: function (response) {
                    setLoading('defaultBtn', false);
                    if (response.success) {
                        const info = `用户名: ${response.data.username}\n` +
                            `明文密码: ${response.data.originalPassword}\n` +
                            `加密密码: ${response.data.encodedPassword}\n\n` +
                            `SQL插入语句:\n${response.data.sqlInsert}`;
                        $('#defaultPasswordInfoText').text(info);
                        showResult('defaultResult');
                        showToast('获取默认Admin密码成功！', 'success');
                    } else {
                        showToast('获取失败: ' + response.message, 'error');
                    }
                },
                error: function (xhr, status, error) {
                    setLoading('defaultBtn', false);
                    showToast('请求失败，请检查网络连接', 'error');
                }
            });
        }

        // 回车键提交
        $('#plainPassword').on('keypress', function (e) {
            if (e.which === 13) encodePassword();
        });

        $('#verifyPlainPassword, #verifyEncodedPassword').on('keypress', function (e) {
            if (e.which === 13) verifyPassword();
        });

        $('#multiplePlainPassword').on('keypress', function (e) {
            if (e.which === 13) generateMultiplePasswords();
        });

        // 页面加载完成后的初始化
        $(document).ready(function () {
            // 添加按钮ID
            $('button[onclick="encodePassword()"]').attr('id', 'encodeBtn');
            $('button[onclick="verifyPassword()"]').attr('id', 'verifyBtn');
            $('button[onclick="generateMultiplePasswords()"]').attr('id', 'multipleBtn');
            $('button[onclick="getDefaultAdminPassword()"]').attr('id', 'defaultBtn');

            // 性能优化：使用requestAnimationFrame优化动画
            const optimizedSlideInRight = `
                @keyframes slideInRight {
                    from {
                        transform: translateX(100%) translateZ(0);
                        opacity: 0;
                    }
                    to {
                        transform: translateX(0) translateZ(0);
                        opacity: 1;
                    }
                }
            `;

            // 添加CSS动画
            $('<style>')
                .prop('type', 'text/css')
                .html(optimizedSlideInRight)
                .appendTo('head');

            // 优化滚动性能：使用节流函数
            let scrollTimeout;
            $(window).on('scroll', function () {
                if (scrollTimeout) {
                    clearTimeout(scrollTimeout);
                }
                scrollTimeout = setTimeout(function () {
                    // 滚动时的优化处理
                    $('.tool-card').css('will-change', 'auto');
                }, 100);
            });

            // 优化hover性能：使用事件委托
            $(document).on('mouseenter', '.tool-card', function () {
                $(this).css('will-change', 'transform');
            }).on('mouseleave', '.tool-card', function () {
                $(this).css('will-change', 'auto');
            });
        });
    </script>
</body>

</html>